<script>
  import EventChildComponent from './EventChildComponent.svelte'

  let m = {
    x: 0,
    y: 0,
  }
  let message = ''
  function handleMove(event) {
    m.x = event.clientX
    m.y = event.clientY
  }


  function handleClick() {
    alert('only can click once!')
  }
  function handleMessageClick(event) {
    console.log(event)
    // event.detail 表示分发出来的数据
    message = event?.detail?.text
    alert(message)
  }
</script>

<div class="box" on:mousemove={handleMove} on:click|once={handleClick}>
  The mouse position is {m.x} x {m.y}
</div>
<EventChildComponent on:message={handleMessageClick} on:gradesun-message />

<style>
  .box {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
  }
</style>
